<script setup>
import { onMounted, ref } from 'vue'
import { articleGetAllService } from '@/api/article.js'

import { useRouter } from 'vue-router'
const router = useRouter()

// 声明响应式数据 ref, 能触发视图更新
const count = ref(0)
// 声明非响应式数据, 不能触发视图更新
// const count = 0;

// 定义响应式数据
//const 是常量，let是局部变量，var是全局变量
const searchConditions = ref({
    title: '',
    userId: ''
})
const articleList = ref([]);
const tiaojian = '搜索条件';
// 同步获取
const getAllArticle = async function () {
    let data = await articleGetAllService();
    // console.log(data);
    articleList.value = data;
    // 响应式数据赋值
    console.log(articleList.value);

    searchConditions.value.title = articleList.value[0].title;
    searchConditions.value.userId = articleList.value[0].userId;
}
getAllArticle();



// 声明函数
function increment() {
    count.value++;
}
function clear() {
    searchConditions.value.title = ''
    searchConditions.value.userId = ''

    // 路由跳转
    router.push({ path: '/' })
}
// 声明钩子函数 onMounted
onMounted(() => {
    console.log('vue component mounted')
})



</script>

<template>
    <el-config-provider :locale="zhTw">
        <!--  html代码 -->
        <el-button @click="increment">count: {{ count }}</el-button> &nbsp; &nbsp;
        <el-button type="primary" @click="clear">clear</el-button>
        <br>
        <input type="text" v-model="searchConditions.title">
        <input type="text" v-model="searchConditions.userId">
        <br>
        <p>{{ tiaojian }}: {{ searchConditions.title }} - {{ searchConditions.userId }}</p>
    </el-config-provider>


</template>

<style></style>